<template>
  <div class="detail-content">
    <el-tabs
      ref="tabs"
      v-model="activeName"
      class="text-tabs TTB-no-gutter TTB-gutter"
      @tab-click="change"
    >
      <el-tab-pane
        v-if="showTab"
        label="基本信息"
        name="basicmsg"
      ></el-tab-pane>
      <el-tab-pane
        v-if="showTab3"
        label="报警记录"
        name="alarmrecord"
      ></el-tab-pane>
      <el-tab-pane
        v-if="showTab1"
        label="采集记录"
        name="gatherrecord"
      ></el-tab-pane>
      <el-tab-pane
        v-if="showTab2"
        label="巡检记录"
        name="pollingrecord"
      ></el-tab-pane>
    </el-tabs>
    <el-button
      @click="goback"
      class="back-button"
      icon="el-icon-arrow-left"
      type="text"
    >
      返回
    </el-button>
    <component
      class="component-content"
      :is="activeName"
      :ref="activeName"
      :id="id"
    ></component>
  </div>
</template>

<script>
import basicmsg from "./basicmsg.vue";
import alarmrecord from "./alarmrecord.vue";
import gatherrecord from "./gatherrecord.vue";
import pollingrecord from "./pollingrecord.vue";
import auth from "@/plugins/auth";
export default {
  components: {
    basicmsg,
    alarmrecord,
    gatherrecord,
    pollingrecord,
  },
  data() {
    return {
      activeName: "basicmsg",
      id: null,
      showTab: false,
      showTab1: false,
      showTab2: false,
      showTab3: false,
    };
  },
  created() {},
  mounted() {
    this.judgePermi();
    this.getRouterquery();
  },
  methods: {
    judgePermi() {
      if (auth.hasPermi("device:archive:detail")) {
        this.showTab = true;
      } else {
        this.showTab = false;
      }
      if (auth.hasPermi("wmeter:data:list")) {
        this.showTab1 = true;
      } else {
        this.showTab1 = false;
      }
      if (auth.hasPermi("device:data:list")) {
        this.showTab2 = true;
      } else {
        this.showTab2 = false;
      }
      if (auth.hasPermi("device:waring:tab")) {
        this.showTab3 = true;
      } else {
        this.showTab3 = false;
      }
    },
    getRouterquery() {
      let query = this.$route.query;
      console.log(query);
      this.id = query?.id;
    },
    change() {
      const name = this.$refs.tabs.value;
      if (this.activeName === name) {
        return false;
      }
      // this.$refs[name].initData();
    },
    goback() {
      this.$router.push({
        path: "/resource/sensingEquipment/water",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.detail-content {
  height: 100%;
  position: relative;
  .component-content {
    height: 90%;
  }
  .back-button {
    position: absolute;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    top: 0px;
    right: 20px;
    &:hover {
      color: #10b767;
    }
  }
}
::v-deep .text-tabs {
  .el-tabs__active-bar {
    width: 79px;
  }
  .el-tabs__item {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
  }
  .is-active {
    color: #10b767;
  }
}
</style>
